$(function(){
    let shop = cookie.get('shop');

    shop = JSON.parse(shop);

    let idList =shop.map(el=>el.id).join();
    

    $.ajax({
    url:'../interface/shop.php',
    data:{idList},
    type:'get',
    dataType:'json'
    }).then(res=>{
        let template ='';
        res.forEach(el => {
        let picture = JSON.parse(el.picture);
        let current = shop.filter(elm => elm.id == el.id);
        
        template +=`<li class ="item">
    
        <div class="checkbox">
        <input class="chs" type="checkbox">
          <img style="height: 150px; width: 150px;" src="./${picture[0].src}" alt="">
          
        </div>
        <div>
        <p class="title-p">${el.title}</p>
        </div>
        <div>
         <p style="font-weight:700;"> 单价: ￥ ${parseFloat(el.price).toFixed(2)}</p>
        </div>
        <div>
          <input class='vel' type="number" value="${current[0].num}" max="100" min="1">
        </div>
        <div>
          <p class="addprice">总价: <i style="font-weight:700;color:#f50;font-style:normal;">￥ ${(el.price*current[0].num).toFixed(2)}</i></p>
        </div>
        <div>
         <p> <a href="javascript:;" class="removeitem" data-id="${el.id}">删除</a></p>
        </div>
      </li>`
         
        });

        $('.list').html(template);
        // 删除
        $('.removeitem').on('click',function(){
        let result = shop.filter(el=>el.id!=$(this).attr('data-id'));
        cookie.set('shop',JSON.stringify(result));
        location.reload();
        })

        // 添加数量总价改变
        $('.vel').click(function(){
        let res =$(this).val();
        let index =$(this).parents(".item").index();
        shop[index].num=res;
        cookie.set("shop",JSON.stringify(shop));
        });
        
        // 全选
        let chs= $('chs')  
        let chall=$('.allcheckbox>.allcheck')
        $('.allcheckbox>.allcheck').on('click',function(){
         for(let i=0;i<chs.length;i++){
            chs[i].checked=this.checked;
         }
        });

        for(let i=0;i<chs.length;i++){
        
        chs.onclick =function(){
        let flag =true;

        for( let j=0;j<chs.length;j++){
            if(!chs[j].checked){
                flag=false;
            }
        }
        chall.checked =flag;
        }
        }


    }).catch(xhr=>{
        console.log(xhr.status);
    });
});